<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>INSPINIA | Mailbox</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <!-- echarts -->
    <script src="js/plugins/echarts/echarts.min.js"></script>
    <script src="js/plugins/echarts/sichuan.js"></script>
</head>

<body>

    <div id="wrapper">

        <nav class="navbar-default navbar-static-side" role="navigation">
            <div class="sidebar-collapse">
                <ul class="nav metismenu" id="side-menu">
                    <li class="nav-header">
                        <div class="dropdown profile-element"> <span>
                            <img alt="image" src="./img/logo_blue.png" />
                             </span>
                            <ul class="dropdown-menu animated fadeInRight m-t-xs">
                                <li><a href="profile.html">Profile</a></li>
                                <li><a href="contacts.html">Contacts</a></li>
                                <li><a href="mailbox.html">Mailbox</a></li>
                                <li class="divider"></li>
                                <li><a href="login.html">Logout</a></li>
                            </ul>
                        </div>
                        <div class="logo-element">
                            CMCC
                        </div>
                    </li>
                    <li>
                        <a href="index.html"><i class="fa fa-th-large"></i> <span class="nav-label">参数导入</span></a>
                    </li>
                    <li>
                        <a href="layouts.html"><i class="fa fa-diamond"></i> <span class="nav-label">待处理</span></a>
                    </li>
                    <li>
                        <a href="metrics.html"><i class="fa fa-bar-chart-o"></i> <span class="nav-label">工单派发</span></a>
                    </li>
                    <li class="active">
                        <a href="mailbox.html"><i class="fa fa-envelope"></i> <span class="nav-label">指标统计</span></a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-edit"></i> <span class="nav-label">查询</span><span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level collapse">
                            <li><a href="form_basic.html">工单查询</a></li>
                            <li><a href="form_advanced.html">问题点查询</a></li>
                            <li><a href="form_wizard.html">专项项目列查询</a></li>
                            <li><a href="form_file_upload.html">问题集查询</a></li>
                            <li><a href="form_editors.html">暂挂库查询</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="metrics.html"><i class="fa fa-pie-chart"></i> <span class="nav-label">已处理</span>  </a>
                    </li>
                    <li>
                        <a href="widgets.html"><i class="fa fa-flask"></i> <span class="nav-label">工单统计</span></a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-desktop"></i> <span class="nav-label">帮助</span><span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level collapse">
                            <li><a href="contacts.html">工单规则</a></li>
                            <li><a href="profile.html">流程图</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="invoice.html"><i class="fa fa-files-o"></i> <span class="nav-label">使用统计</span></a>
                    </li>
                    <li>
                        <a href="typography.html"><i class="fa fa-flask"></i> <span class="nav-label">专项派发</span></a>
                    </li>
                    <li>
                        <a href="grid_options.html"><i class="fa fa-laptop"></i> <span class="nav-label">一键处理</span></a>
                    </li>
                </ul>
            </div>
        </nav>

        <div id="page-wrapper" class="gray-bg">
        <div class="row border-bottom">
        <nav class="navbar navbar-static-top white-bg" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
            <form role="search" class="navbar-form-custom" action="search_results.html">
                <div class="form-group">
                    <input type="text" placeholder="Search for something..." class="form-control" name="top-search" id="top-search">
                </div>
            </form>
        </div>
            <ul class="nav navbar-top-links navbar-right">
                <li>
                    <span class="m-r-sm text-muted welcome-message">网优中心-刘华明</span>
                </li>
                <li>
                    <a href="login.html">
                        <i class="fa fa-sign-out"></i> Log out
                    </a>
                </li>
            </ul>

        </nav>
        </div>

        <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-lg-12 animated fadeInLeft"> <!-- 为满足地图自适应，请务必设置col-lg-12 -->
                <div id="main" ></div>
                <script type="text/javascript">
                    var myChart = echarts.init(document.getElementById('main'));
                    //---地图自适应
                    var worldMapContainer = document.getElementById('main');
                    //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
                    var resizeWorldMapContainer = function () {
                        worldMapContainer.style.width = window.innerWidth+'px';
                        worldMapContainer.style.height = (window.innerHeight)/1.5+'px';
                    };
                    //设置容器高宽
                    resizeWorldMapContainer();
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(worldMapContainer);
                    myChart.setOption({
                        title: {
                            text : '常规化小区参数指标',
                            subtext : '参数：2016年10月14日全省重点参数合规率99.97%',
                            left: 'center',
                            top: 'top'
                        },
                        tooltip : {
                            trigger: 'item'
                        },
                        // color:['#9dc1fe','red'],
                        legend: {
                            orient: 'vertical',
                            left: '30%',
                            height: worldMapContainer.style.height,
                            width: worldMapContainer.style.width,
                            bottom: 'bottom',
                            data:['平均合规率≥98%','平均合规率<98%']
                        },
                        visualMap: {
                            min: 90,
                            max: 100,
                            left: 'left',
                            top: 'bottom',
                            // color:['green','yellow'],
                            //show:false,					//是否显示 visualMap-continuous 组件
                            text: ['高','低'],           // 文本，默认为数值文本
                            calculable: true,
                            inRange: {
                                // color: ['rgb(245,255,12)','rgb(103,245,23)','rgb(25,180,37)','green'],
                                color: ['#ff9f0f','yellow','#5cb85c'],
                                symbolSize: [30, 100]
                            }
                        },
                        series : [
                            {
                                name: '平均合规率≥98%',
                                type: 'map',
                                mapType: '四川',
                                selectedMode : 'single',
                                itemStyle:{
                                    normal:{label:{show:true}},
                                    emphasis:{label:{show:true}}
                                },
                                data:[]
                            },
                            {
                                name: '平均合规率<98%',
                                type: 'map',
                                mapType: '四川',
                                selectedMode : 'single',
                                itemStyle:{
                                    normal:{label:{show:true}},
                                    emphasis:{label:{show:true}}
                                },
                                data:[]
                            }
                        ]
                    });
                    //用于使chart自适应高度和宽度
                    window.onresize = function () {
                        //重置容器高宽
                        resizeWorldMapContainer();
                        myChart.resize();
                    };
                </script>
            </div>
            <div class="col-lg-12 animated fadeInRight">
                table here!
            </div>
        </div>
        </div>
        <div class="footer">
            <div class="pull-right">
                10GB of <strong>250GB</strong> Free.
            </div>
            <div>
                <strong>Copyright</strong> Example Company &copy; 2014-2015
            </div>
        </div>

        </div>
        </div>

    <!-- Mainly scripts -->
    <script src="js/jquery-2.1.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

    <!-- Custom and plugin javascript -->
    <script src="js/inspinia.js"></script>
    <script src="js/plugins/pace/pace.min.js"></script>

    <!-- iCheck -->
    <script src="js/plugins/iCheck/icheck.min.js"></script>


    <script>
        $(document).ready(function(){
            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green',
            });
        });
    </script>
</body>

</html>
